<template>
    <el-dialog v-model="dialogFormVisible" @close="close" :title="title">
        <el-form :model="dialogFormData" ref="dialogForm">
            <!-- 上传图片 -->
            <el-form-item>
                <slot name="upload"></slot>
            </el-form-item>
            <el-form-item v-for="(v, k) in dialogFormData" :key="k" :label="v.label" :label-width="formLabelWidth"
                :prop="(k + '.value')" 
                :rules="{//表单校验
                    required: true,//是否必填
                    trigger: 'blur',//校验触发方式
                    message: v.label + '不能为空'//校验不通过的提醒
                }">
                <el-input v-model="v.value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm(dialogForm)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watchEffect, toRefs } from "vue"
// 想法：
// 1.根据传入的数据，自动创建出from表单元素,form表单的元素类型比较多，现在默认使用input,
// 2.表单需要具备校验属性的功能
// 3.表单通过和不通过，可以回调对应的方法
// 4.控制显示隐藏的属性
// 5.控制labelWidth的属性
// dialog使用说明

// 属性：
// 1.visible:Boolean
// 2.dialogFormData:Object 表单的数据{name:{label:"item的描述"，value:"对应的值"}}
// 3.formLabelWidth：String label的长度
// 4.title:String dialog的标题

// 事件：
// validateSuccess 点击确定按钮，表单校验通过之后触发，回传一个form实例引用
// dialogCancel 点击取消按钮触发的事件
// closed dialog被关闭的时候触发的事件

// 声明props
let props = defineProps({
    // dialog的标题
    title: {
        type: String,
        default() {
            return '增加数据'
        }
    },
    // 控制表单显示与隐藏的
    visible: {
        type: Boolean,
        default() {
            return false
        }
    },
    // 弹窗表单中的数据来源
    dialogFormData: {
        type: Object,
        default() {
            return {}
        },
    },
    formLabelWidth: {
        type: String,
        default() {
            return "140px"
        },
    }
})
// 声明表单校验通过之后的回调
let emits = defineEmits(['validateSuccess', 'dialogCancel', 'closed'])
// dialogFormVisible初始值，定义为传递下来的初始值，控制显示与隐藏
// console.log(props.visible);
let dialogFormVisible = ref(false)
// 使用watchEffect侦听visible props的变化
let { visible } = toRefs(props)
// 实时侦听visible props的变化，控制dialog的显示与隐藏
watchEffect(() => {
    // console.log(visible.value);
    dialogFormVisible.value = visible.value
})
// 点击取消按钮的方法
let cancel = () => {
    emits("dialogCancel")
}
// 点击确定按钮的方法
// 声明一个ref引用dialog的结果
let dialogForm = ref()
let confirm = (form) => {
    form.validate(valid => {
        if (valid) {
            // 表单校验通过
            emits("validateSuccess", dialogForm)
        } else {
            // 表单校验不通过
        }
    })
}
// dialog被关闭的时候触发的事件
let close = () => {
    emits('closed')
}
</script>